<template>
	<div class="card content-box">
		<a-table :columns="columns" :data-source="treeData" style="width: 100%" :rowKey="(record: TreeNode) => record.name">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'title'">
					<div>
						{{ record.meta.title }}
					</div>
				</template>
				<template v-if="column.key === 'isHide'">
					<div>
						{{ record.meta.isHide ? "是" : "否" }}
					</div>
				</template>
			</template>
		</a-table>
	</div>
</template>

<script setup lang="ts" name="menuAuth">
import { computed } from "vue";
import { useAuthStore } from "@/stores/modules/auth";

const authStore = useAuthStore();
const menuList = computed(() => authStore.authMenuListGet);
interface TreeNode {
	name: string;
	path: string;
	component?: string;
	children?: TreeNode[];
}

const treeData = menuList.value as TreeNode[];

const columns = [
	{
		title: "展示名称",
		dataIndex: "title",
		key: "title"
	},
	{
		title: "路由Name",
		dataIndex: "name",
		key: "name"
	},
	{
		title: "路由Path",
		dataIndex: "path",
		key: "path"
	},
	{
		title: "文件路径",
		dataIndex: "component",
		key: "component"
	},
	{
		title: "是否隐藏",
		dataIndex: "isHide",
		key: "isHide"
	},
	{
		title: "重定向地址",
		dataIndex: "redirect",
		key: "redirect"
	}
];
</script>

<style scoped lang="less"></style>
